<template>
  <div class="login">
    <hmttNavBar title="登录"></hmttNavBar>
    <div class="content">
      <van-form ref="form">
        <van-field
          v-model="form.mobile"
          name="mobile"
          placeholder="请输入手机号"
          :rules="rules.mobile"
        >
          <template #left-icon>
            <i class="iconfont">&#xe60a;</i>
          </template>
        </van-field>

        <van-field
          v-model="form.code"
          name="code"
          placeholder="请输入验证码"
          :rules="rules.code"
        >
          <template #left-icon>
            <i class="iconfont">&#xe6ba;</i>
          </template>

          <template #button>
            <span class="code" v-if="totalTime === 5" @click="getCode">
              获取验证码
            </span>
            <span class="code" v-else> {{ totalTime }}s </span>
          </template>
        </van-field>
      </van-form>
      <div style="margin: 40px;">
        <van-button round block @click.native="submit" color="#6db4fb"
          >登录</van-button
        >
      </div>
    </div>
    <footer><span class="footer">隐私条款</span></footer>
  </div>
</template>

<script>
import { setLocal } from '@/utils/local.js'
import { getCode, goSubmit } from '@/api/login.js'
export default {
  data () {
    return {
      form: {
        mobile: 13999999999,
        code: 246810
      },
      totalTime: 5,
      rules: {
        mobile: [
          { required: true, message: '请输入手机号码', tigger: 'onBlur' },
          {
            validator: val => {
              return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(
                val
              )
            },
            message: '请输入手机号码',
            tigger: 'onBlur'
          }
        ],
        code: [{ required: true, message: '请输入验证码', tigger: 'onBlur' }]
      }
    }
  },
  methods: {
    submit () {
      this.$refs.form.validate().then(async () => {
        const res = await goSubmit({
          mobile: this.form.mobile,
          code: this.form.code
        })
        setLocal('token', res.data.data.token)
        setLocal('refresh_token', res.data.data.refresh_token)
        this.$router.push('/home')
        console.log(res)
      })
    },
    async getCode () {
      this.$refs.form.validate('mobile').then(() => {
        // 检验 mobile
        this.$toast.loading({
          // 加载显示
          duration: 0
        })
        // this.totalTime--
        const timeId = setInterval(() => {
          // 定时器控制 按钮
          this.totalTime--
          if (this.totalTime <= 0) {
            clearInterval(timeId)
            this.$toast.success('获取成功') // 清除 toast
            this.totalTime = 5 // 还原button 按钮
          }
        }, 1000)
      })
      try {
        await getCode({
          mobile: this.form.mobile
        })
      } catch (error) {}
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  height: 100%;
  background-color: #f5f7f9;
  .content {
    // padding: 0 15px;
    ::v-deep .van-cell {
      padding-right: 15px;
      padding-left: 15px;
    }
    ::v-deep .van-button--round {
      border-radius: 5px;
    }
    .code {
      display: inline-block;
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #bababa;
      line-height: 22px;
      background-color: #ededed;
      letter-spacing: 0px;
      padding: 4px 8px;
      border-radius: 8px;
    }
  }
  footer {
    text-align: center;
  }
  .footer {
    display: inline-block;
    position: absolute;
    bottom: 40px;
    font-family: MicrosoftYaHei;
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 18px;
    letter-spacing: 1px;
    color: #666666;
    transform: translateX(-50%);
  }
}
</style>
